<template>
  <el-dialog
    center
    :width="isMobile() ? '90%' : '700px'"
    :title="`新版本 ${versionNo}`"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    :before-close="cancel"
  >
    <div class="content">
      <div>功能:</div>
      <div v-for="item in updateContent">
        {{ item }}
        <br />
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="!isNew" @click="confirm" type="primary">确定</el-button>
      <el-button @click="cancel">关 闭</el-button>
      <el-button v-if="isNew" @click="reload" type="primary">确定并刷新页面</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * isNew
     */
    isNew: {
      type: Boolean,
      default: false,
    },
    /**
     * versionNo
     */
    versionNo: {
      type: String,
      default: '',
    },
    /**
     * updateContent
     */
    updateContent: {
      type: Array,
      default: () => [],
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      showSearch: true,
      tableCheck: [],
      tableData: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
      }
    },
  },
  methods: {
    getList() {},
    reload() {
      localStorage.setItem(
        'local-version',
        JSON.stringify({ version_no: this.versionNo, update_content: this.updateContent, alerted: true }),
      )
      location.reload()
    },
    confirm() {
      localStorage.setItem(
        'local-version',
        JSON.stringify({ version_no: this.versionNo, update_content: this.updateContent, alerted: true }),
      )
      this.cancel()
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog__header {
  background-color: #409eff;
  margin-top: 20vh;
  .el-dialog__title {
    color: white;
  }
  .el-dialog__headerbtn {
    i {
      color: white;
    }
  }
}
.content {
  font-size: 15px;
  font-weight: 600;
  line-height: 2;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
